<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- —以下继承中推荐使用寄生组合继承和class继承 -->








  <!-- 原型继承 
    缺点：如果一个实列对象改变了父对象的引用的数据，会反应到所有子类型上。
    所有子类型共享超类型的引用数据
  -->
  <!-- <script>
    function Parent(){
      this.age = 50
      this.colors = ['red']
      this.fn = function() {
        console.log('我是Parent里面发fn方法');
      }
    }

    function Child() {

    }
    Child.prototype = new Parent()
    let ch = new Child()
    console.log(ch.age);
    ch.colors.push('green')
    console.log(ch.colors);
    console.log(ch.fn());

    let ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.colors);
    console.log(ch2.fn());
  </script> -->
<!-- 构造函数继承 
  原型中定义的方法也无法继承
-->
  <!-- <script>
    function Parent(c){
      this.age = 50
      let colorsArr = ['red']
      colorsArr.push(c)
      this.colors = colorsArr
      this.fn = function() {
        console.log('我是Parent里面发fn方法');
      }
    }
    Parent.prototype.sayHi = function() {
      console.log('sayhi');
    }
    function Child() {
      Parent.call(this,'gg')
    }
    let ch = new Child()
    console.log(ch.age);
    ch.colors.push('green')
    console.log(ch.colors);
    console.log(ch.fn());
    console.log(ch.sayHi());

    let ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.colors);
    console.log(ch2.fn());
    console.log(ch2.sayHi());
  </script> -->
  <!-- 组合继承
    会两次调用父类的构造函数，会有两份一样的方法和属性，影响性能
   -->
  <!-- <script>
    function Parent(c){
      this.age = 50
      let colorsArr = ['red']
      colorsArr.push(c)
      this.colors = colorsArr
      this.fn = function() {
        console.log('我是Parent里面发fn方法');
      }
    }
    Parent.prototype.sayHi = function() {
      console.log('sayhi');
    }
    function Child() {
      Parent.call(this,'gg') // 构造函数继承
    }
     Child.prototype = new Parent() // 原型继承
    let ch = new Child()
    console.log(ch);
    console.log(ch.age);
    ch.colors.push('green')
    console.log(ch.colors);
    console.log(ch.fn());
    console.log(ch.sayHi());

    let ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.colors);
    console.log(ch2.fn());
    console.log(ch2.sayHi());
  </script> -->
  <!-- 寄生组合调用 
    目前来说最优：创建一个空的函数fn，fn函数的prototype=父类.prototype
                子类的prototype=new fn()
  -->
  <!-- <script>
    function Parent(c){
      this.age = 50
      let colorsArr = ['red']
      colorsArr.push(c)
      this.colors = colorsArr
      this.fn = function() {
        console.log('我是Parent里面发fn方法');
      }
    }
    Parent.prototype.sayHi = function() {
      console.log('sayhi');
    }
    function Child() {
      Parent.call(this,'gg') // 构造函数继承
    }

    const fn = function() {
    }
    fn.prototype = Parent.prototype
    Child.prototype = new fn()
    let ch = new Child()
    console.log(ch);
    console.log(ch.age);
    ch.colors.push('green')
    console.log(ch.colors);
    console.log(ch.fn());
    console.log(ch.sayHi());

    let ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.colors);
    console.log(ch2.fn());
    console.log(ch2.sayHi());
  </script> -->
  <!-- es6中class类关键字继承 -->
  <script>
    class Parent{
      constructor(c){
        this.age = 50
        let colorsArr = ['red']
        colorsArr.push(c)
        this.colors = colorsArr
      }
      fn() {
        console.log('我是Parent里面发fn方法');
      }
      sayHi() {
        console.log('我是Parent里面sayHi方法');
      }
    }

    class Child extends Parent{
     constructor(c) {
      super(c)
     } 
    }

    let ch = new Child('red')
    console.log(ch);
    console.log(ch.age);
    ch.colors.push('green')
    console.log(ch.colors);
    console.log(ch.fn());
    console.log(ch.sayHi());

    let ch2 = new Child('yellow')
    console.log(ch2.age);
    console.log(ch2.colors);
    console.log(ch2.fn());
    console.log(ch2.sayHi());

  </script>
</body>
</html>